<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>学生端前台</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../../static/layui/css/layui.css" rel="stylesheet">
    <link rel="stylesheet" href="../../static/css/all.min.css">

    <style>
        :root {
            --primary-color: #409EFF;
            --sidebar-bg: #1f2d3d;
            --sidebar-hover: #263445;
            --header-bg: #ffffff;
            --content-bg: #f5f7fa;
            --text-color: #333;
            --text-light: #666;
            --border-color: #e6e6e6;
            --shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }

        body {
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
            color: var(--text-color);
        }

        .layui-layout-admin {
            background-color: var(--content-bg);
        }

        .layui-header {
            height: 60px;
            background-color: var(--header-bg) !important;
            box-shadow: var(--shadow);
            z-index: 1001;
            border-bottom: 1px solid var(--border-color);
        }

        .layui-logo {
            width: 220px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            color: var(--primary-color) !important;
            background-color: var(--sidebar-bg) !important;
            transition: all 0.3s;
        }

        /* 1. 左侧导航栏容器：清除边框，隐藏滚动条 */
        .layui-side {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            width: 220px;
            background-color: #1f2d3d;
            box-shadow: none;
            overflow: hidden;
            border-right: none;
        }

        /* 2. 导航栏滚动容器：充满父容器，清除默认样式 */
        .layui-side-scroll {
            height: 100%;
            padding: 0;
            overflow-y: auto;
        }

        /* 3. 隐藏滚动条（关键！） */
        .layui-side-scroll::-webkit-scrollbar {
            width: 0;
            height: 0;
        }

        /* 4. 内容区：清除左侧边框，与导航栏对齐 */
        .layui-body {
            position: relative;
            left: 220px;
            top: 0;
            right: 0;
            bottom: 0;
            padding: 15px;
            background-color: #fff;
            border-left: none;
        }

        .layui-nav .layui-nav-item {
            line-height: 56px;
        }

        /* 5. 导航菜单项：紧凑排版，消除违和感 */
        .layui-nav-tree {
            background-color: var(--sidebar-bg) !important;
            padding: 0;
            border: none;
        }

        .layui-nav-tree .layui-nav-item {
            margin: 0;
        }

        .layui-nav-tree .layui-nav-item a {
            color: #bfcbd9 !important;
            font-size: 14px;
            height: 50px;
            line-height: 50px;
            padding: 0 20px !important;
            transition: all 0.3s;
        }

        .layui-nav-tree .layui-nav-item a:hover {
            background-color: var(--sidebar-hover) !important;
            color: #fff !important;
        }

        .layui-nav-tree .layui-nav-item a i {
            margin-right: 10px;
            font-size: 16px;
        }

        .layui-nav-tree .layui-nav-item.layui-this a {
            background-color: var(--primary-color) !important;
            color: #fff !important;
        }

        .layui-nav-tree .layui-nav-child {
            background-color: #1c2b3a !important;
            padding: 0 !important;
        }

        .layui-nav-tree .layui-nav-child a {
            padding-left: 50px !important;
        }

        .layui-nav-tree .layui-nav-child a:hover {
            background-color: #001528 !important;
        }

        /* 用户信息样式 */
        .user-info {
            display: flex;
            align-items: center;
            padding: 0 20px;
            height: 60px;
            cursor: pointer;
        }

        .user-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            margin-right: 10px;
        }

        .user-name {
            font-size: 14px;
            color: var(--text-color);
        }

        /* iframe样式（暂时保留，若后续不需要可删除） */
        iframe {
            width: 100%;
            height: 100%;
            border: none;
            background-color: #fff;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .layui-side {
                left: -220px;
            }

            .layui-body {
                left: 0;
            }

            .layui-logo {
                width: 60px;
                overflow: hidden;
            }
        }

        /* 动画效果 */
        .layui-nav-item {
            transition: all 0.3s;
        }

        /* 面包屑导航 */
        .breadcrumb {
            padding: 15px;
            background-color: #fff;
            border-bottom: 1px solid var(--border-color);
            margin-bottom: 15px;
            position: static;
            width: auto;
            height: auto;
            line-height: inherit;
            text-align: left;
            color: inherit;
            font-size: inherit;
        }

        .breadcrumb-item {
            display: inline-block;
            color: var(--text-light);
            font-size: 14px;
        }

        .breadcrumb-item:not(:last-child):after {
            content: "/";
            margin: 0 8px;
            color: #c0c4cc;
        }

        .breadcrumb-item.active {
            color: var(--primary-color);
        }
    </style>
</head>

<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">
            <!-- 后续加左侧图标，保留结构 -->
            <h2>师生助手-学生端</h2>
        </div>
        <div class="breadcrumb">
            <span class="breadcrumb-item"><i class="fas fa-home"></i> 首页</span>
            <span class="breadcrumb-item active">学生端</span>
        </div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <div class="user-info">
                    <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" class="user-avatar"
                         alt="头像">
                    <span class="user-name">学生姓名</span> <!-- 可根据实际动态显示 -->
                </div>
                <dl class="layui-nav-child">
                    <dd><a href="studentInfo"><i class="fas fa-user-circle"></i> 个人中心</a></dd>
                    <dd class="returnlogin"><a href="javascript:;"><i class="fas fa-sign-out-alt returnlogin"></i> 退出登录</a>
                    </dd>
                </dl>
            </li>
        </ul>
    </div>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree">
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="studentChat" target="myIframe">
                        <i class="fas fa-comments"></i>
                        <span>班级聊天</span>
                    </a>
                </li>
                <li class="layui-nav-item">
                    <a href="ClassNote" target="myIframe">
                        <i class="fas fa-sticky-note"></i>
                        <span>上课笔记</span>
                    </a>
                </li>
                <li class="layui-nav-item">
                    <a href="WrongQuestion" target="myIframe">
                        <i class="fas fa-exclamation-triangle"></i>
                        <span>错题本</span>
                    </a>
                </li>
                <!-- 新增“我的考试”标签 -->
                <li class="layui-nav-item">
                    <a href="MyExam" target="myIframe">
                        <i class="fas fa-file-alt"></i> <!-- 用了 fas fa-file-alt 图标，可换成你想要的 -->
                        <span>我的考试</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="layui-body">
        <!-- 这里暂时保留iframe，后续若不需要子页面展示可删除，替换为其他内容 -->
        <iframe name="myIframe"  src="studentChat" frameborder="0" onload="resizeIframe(this)"></iframe>
    </div>
</div>

<script src="../../static/js/jquery.js"></script>
<script src="../../static/js/jquery.cookie.js"></script>
<script src="../../static/js/StudentIndex.js"></script>
<script src="../../static/layui/js/layui.js"></script>
<script>
    layui.use(['element', 'layer', 'util'], function () {
        var element = layui.element;
        var layer = layui.layer;
        var util = layui.util;
        var $ = layui.$;

        util.event('lay-header-event', {
            menuRight: function () {
                layer.open({
                    type: 1,
                    title: '快捷菜单',
                    content: '<div style="padding: 15px;">' +
                        '<div class="layui-btn-container">' +
                        '<button class="layui-btn layui-btn-sm"><i class="fas fa-bell"></i> 消息中心</button>' +
                        '<button class="layui-btn layui-btn-sm layui-btn-normal"><i class="fas fa-tasks"></i> 待办事项</button>' +
                        '<button class="layui-btn layui-btn-sm layui-btn-warm"><i class="fas fa-question-circle"></i> 帮助中心</button>' +
                        '</div></div>',
                    area: ['280px', 'auto'],
                    offset: 'rt',
                    anim: 'slideLeft',
                    shadeClose: true,
                    scrollbar: false
                });
            }
        });

        $('.layui-nav-tree .layui-nav-item a').on('click', function () {
            var text = $(this).find('span').text();
            $('.breadcrumb-item.active').text(text);
        });

        $('iframe').on('load', function () {
            $(this).height($(window).height() - 90);
        });

        $(window).resize(function () {
            $('iframe').height($(window).height() - 90);
        });
    });

    function resizeIframe(obj) {
        obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
    }
</script>
</body>

</html>